<template>
  <div class="testlist" ref="testlist">
    <div class="content-body">
      <!-- 头部 -->
      <div class="search">
        <h3 style="margin-bottom: 20px">考试列表</h3>
      </div>
      <hr />
      <!-- 考试列表 表格 -->
      <div class="table-content">
        <el-table
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          border
          style="width: 100%; font-size: 16px"
        >
          <el-table-column fixed align="center" prop="id" label="序号">
          </el-table-column>
          <el-table-column align="center" prop="examName" label="考试名称">
          </el-table-column>
          <el-table-column align="center" prop="examCreator" label="创建人">
          </el-table-column>
          <el-table-column align="center" prop="examTimeLimit" label="时长">
          </el-table-column>
          <el-table-column align="center" prop="examScore" label="总分数">
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column align="center" prop="updateTime" label="更新时间">
          </el-table-column>
          <el-table-column align="center" prop="status" label="状态">
            <el-button type="primary" plain disabled>未提交</el-button>
          </el-table-column>
          <el-table-column align="center" fixed="right" label="操作">
            <template>
              <el-button
                type="primary"
                @click.prevent="open"
                size="small"
                align="center"
                style="font-size: 16px"
              >
                开始考试
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部分页器 -->
      <div class="footer">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @prev-click="upChange"
          @next-click="nextChange"
          :page-sizes="[5, 10]"
          :page-size="pageSize"
          :current-page="currentPage"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageSize: 5,
      currentPage: 1,
      total: 100,
      tableData: [
        {
          id: "",
          examName: "",
          examCreator: "",
          examTimeLimit: "",
          examScore: "",
          createTime: "",
          updateTime: "",
        },
      ],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      input2: "",
    };
  },
  mounted() {
    // 考试列表内容
    this.$api.studentInfo.getStudentExam().then((res) => {
      console.log(res.data);
      // this.from = res.data;
      // console.log(from);
      if (res.data.code == 200) {
        // 表格数据赋值
        console.log(res);
        this.tableData = res.data.data;
        console.log(res.data.data);
      } else {
        console.log("111");
      }
    });
    // 这个方式禁用esc会有提示，去不掉
    if (navigator.keyboard && navigator.keyboard.lock) {
      // 禁用esc退出全屏
      navigator.keyboard.lock(["Escape"]);
    } else {
      console.log("您的浏览器上不支持该功能");
    }

    window.addEventListener("resize", this.judgeCurrentScreen);
  },
  destroyed() {
    window.removeEventListener("resize", this.judgeCurrentScreen);
  },
  methods: {
    // 点击开始考试
    open() {
      this.$confirm("考试期间不得退出全屏, 是否继续?", "注意", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$router.push("/student/exam");
          this.fullScreen();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },

    // 全屏展示
    fullScreen() {
      this.$fullscreen.enter(this.$refs["container"], {
        wrap: false,
      });
    },
    // 判断当前的屏幕是否为全屏状态
    judgeCurrentScreen() {
      // 非全屏状态
      if (!this.checkFull()) {
        this.isFullscreen = false;
      }
      // 全屏状态
      if (this.checkFull()) {
        this.isFullscreen = true;
      }
    },
    // 判断全屏
    checkFull() {
      //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      //火狐浏览器
      var isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled;
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    upChange(val) {
      this.currentPage -= 1;
    },
    nextChange(val) {
      this.currentPage += 1;
    },
  },
};
</script>

<style lang="less" scoped>
.testlist {
  width: 100%;
  background-color: #f0f2f5;
}
.content-header {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  height: 100px;
  background-color: #fff;
}
.content-body {
  width: 90%;
  height: 817px;
  margin: 0 auto;
  margin-top: 110px;
  background-color: #fff;
  padding: 30px;
  box-sizing: border-box;
  .search {
    .el-input {
      width: 300px;
      margin: 20px;
    }
  }
  .table-content {
    width: 100%;
    height: 550px;
    padding-top: 30px;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .table-content::-webkit-scrollbar {
    display: none;
  }

  .footer {
    position: fixed;
    bottom: 25px;
    right: 110px;
    margin: 20px;
  }
}
.el-main {
  background-color: #f0f2f5;
  color: #333;
  padding: 0;
}
</style>